import React, { useState } from 'react';
import { NavBar, Image, Rate, Tabs, Grid, Button } from 'antd-mobile';
import {
    LeftOutline,
    StarOutline,
    StarFill,
    RightOutline
} from 'antd-mobile-icons';
import { useNavigate, useParams } from 'react-router-dom';
import '../styles/doctorDetail.scss';

// 患者评价接口
interface PatientReview {
    id: string;
    name: string;
    gender: '男' | '女';
    age: number;
    content: string;
    rating: number;
    date: string;
}

const DoctorDetailPage: React.FC = () => {
    const navigate = useNavigate();
    const { id } = useParams<{ id: string }>();
    const [isFavorite, setIsFavorite] = useState(false);
    const [activeTab, setActiveTab] = useState('info');

    // 模拟的医生数据
    const doctor = {
        id: '1',
        name: '张医生',
        title: '主任医师',
        department: '心内科',
        hospital: '协和医院',
        rating: 4.8,
        ratingCount: 12354,
        expertise: '擅长各种心血管疾病的诊断与治疗，特别是冠心病、高血压、心力衰竭、心律失常等心血管疾病的诊治。尤其在复杂心血管疾病的诊断和治疗方面有丰富的临床经验。',
        fee: 150,
        schedule: [
            { day: '今天', available: false },
            { day: '明天', available: true },
            { day: '周三', available: true }
        ]
    };

    // 模拟的患者评价数据
    const reviews: PatientReview[] = [
        {
            id: '1',
            name: '李**',
            gender: '男',
            age: 32,
            content: '医生非常专业，态度也很好，解释得很清楚，让我对自己的病情有了更深入的了解，治疗效果也很明显。',
            rating: 5,
            date: '2023-07-15'
        },
        {
            id: '2',
            name: '王**',
            gender: '女',
            age: 45,
            content: '医生很有耐心，细致地询问了我的症状和病史，诊断很准确，开的药也很有效。',
            rating: 5,
            date: '2023-07-10'
        }
    ];

    const toggleFavorite = () => {
        setIsFavorite(!isFavorite);
    };

    const handleBack = () => {
        navigate('/doctors/心内科'); // 返回对应科室的医生列表
    };

    const handleCall = () => {
        console.log('联系电话');
    };

    const handleConsult = () => {
        console.log('在线咨询');
    };

    const handleShare = () => {
        console.log('分享');
    };

    const handleBooking = () => {
        console.log('立即预约');
        // 导航到预约确认页面
        navigate(`/booking/confirm/${id}`);
    };

    // 渲染出诊时间选择
    const renderSchedule = () => {
        return (
            <div className="schedule-section">
                <h3 className="section-title">出诊时间</h3>
                <Grid columns={3} gap={8}>
                    {doctor.schedule.map((slot, index) => (
                        <Grid.Item key={index}>
                            <div className={`schedule-item ${slot.available ? 'available' : 'unavailable'}`}>
                                <div className="day">{slot.day}</div>
                                <div className="status">
                                    {slot.available ? '可预约' : '已满'}
                                </div>
                            </div>
                        </Grid.Item>
                    ))}
                </Grid>
                <div className="schedule-pagination">
                    <span className="prev-arrow">◄</span>
                    <div className="pagination-indicator"></div>
                    <span className="next-arrow">►</span>
                </div>
            </div>
        );
    };

    // 渲染患者评价
    const renderReviews = () => {
        return (
            <div className="reviews-section">
                <div className="reviews-header">
                    <h3 className="section-title">患者评价</h3>
                    <span className="reviews-count">全部 {reviews.length > 0 ? reviews.length : 0}</span>
                </div>

                {reviews.length > 0 ? (
                    <div className="reviews-list">
                        {reviews.map(review => (
                            <div key={review.id} className="review-item">
                                <div className="review-header">
                                    <div className="reviewer-info">
                                        <span className="reviewer-name">{review.name}</span>
                                        <span className="reviewer-detail">{`(${review.gender}, ${review.age}岁)`}</span>
                                    </div>
                                    <div className="review-date">{review.date}</div>
                                </div>
                                <div className="review-rating">
                                    <Rate readOnly value={review.rating} />
                                </div>
                                <div className="review-content">{review.content}</div>
                            </div>
                        ))}
                    </div>
                ) : (
                    <div className="no-reviews">暂无评价</div>
                )}
            </div>
        );
    };

    return (
        <div className="doctor-detail-page">
            {/* 顶部导航栏 */}
            <NavBar
                className="nav-bar"
                backArrow={<LeftOutline />}
                onBack={handleBack}
                right={
                    <div className="favorite-icon" onClick={toggleFavorite}>
                        {isFavorite ? <StarFill color="#ffc53d" /> : <StarOutline />}
                    </div>
                }
            >
                医生详情
            </NavBar>

            {/* 医生基本信息 */}
            <div className="doctor-basic-info">
                <div className="doctor-header">
                    <div className="doctor-avatar">
                        <Image
                            src="https://via.placeholder.com/80"
                            width={80}
                            height={80}
                            fit="cover"
                            placeholder=""
                            alt={doctor.name}
                        />
                    </div>
                    <div className="doctor-profile">
                        <h2 className="doctor-name">{doctor.name}</h2>
                        <div className="doctor-title">{doctor.title} | {doctor.department}</div>
                        <div className="doctor-hospital">{doctor.hospital}</div>
                        <div className="doctor-rating">
                            <Rate readOnly value={Math.floor(doctor.rating)} allowHalf />
                            <span className="rating-score">{doctor.rating}</span>
                            <span className="rating-count">({doctor.ratingCount}人)</span>
                        </div>
                    </div>
                </div>

                {/* 快捷操作按钮 */}
                <div className="quick-actions">
                    <div className="action-button" onClick={handleCall}>
                        <div className="action-icon call-icon">📞</div>
                        <div className="action-text">联系电话</div>
                    </div>
                    <div className="action-button" onClick={handleConsult}>
                        <div className="action-icon consult-icon">💬</div>
                        <div className="action-text">在线咨询</div>
                    </div>
                    <div className="action-button" onClick={handleShare}>
                        <div className="action-icon share-icon">🔄</div>
                        <div className="action-text">分享</div>
                    </div>
                </div>
            </div>

            {/* 医生详细信息内容 */}
            <div className="doctor-detail-content">
                <Tabs
                    activeKey={activeTab}
                    onChange={setActiveTab}
                    className="detail-tabs"
                >
                    <Tabs.Tab title="医生简介" key="info">
                        <div className="expertise-section">
                            <h3 className="section-title">擅长领域</h3>
                            <p className="expertise-content">{doctor.expertise}</p>
                        </div>
                    </Tabs.Tab>
                    <Tabs.Tab title="患者评价" key="reviews">
                        <div className="empty-placeholder"></div>
                    </Tabs.Tab>
                </Tabs>

                {activeTab === 'info' ? (
                    <>
                        {renderSchedule()}
                        {renderReviews()}
                    </>
                ) : (
                    <div className="reviews-tab-content">
                        {renderReviews()}
                    </div>
                )}
            </div>

            {/* 底部预约区 */}
            <div className="booking-section">
                <div className="fee-info">
                    <span className="fee-label">挂号费:</span>
                    <span className="fee-amount">¥{doctor.fee.toFixed(2)}</span>
                </div>
                <Button
                    color="primary"
                    className="booking-button"
                    onClick={handleBooking}
                >
                    立即预约
                </Button>
            </div>
        </div>
    );
};

export default DoctorDetailPage; 